// 定义主组件
let vm=new Vue({
    // 刚开始进入界面时应该已经初始化了界面
    // 在Vue的生命周期里初始化界面
    mounted(){
        // axios get请求接口数据  传入剩下的URL信息和keywords
        axios.get("/search",{
            params:{
                keywords:"张艺兴",
            }
        })
        .then((res)=>{
            console.log(res);// 我们只要result下的data里的songs里的数据，所以要用axios的返回的拦截器
            this.songs=res.result.songs;
            console.log(this.songs);
        })
        // 异常处理
        .catch((err)=>{
            console.log(err);
        })
        
    },
    el:"#app",
    data:{
        keywords:"",// 搜索词
        songs:[],// 歌曲列表
        songUrl:"",//歌曲音频URL数据
        mvUrl:"",//歌曲mv的URL
        isAudioPlaying:false,// 音频是否播放标志位，false未播放；true正在播放
        isVideoPlaying:false,// MV是否播放标志位，false未播放；true正在播放
        imgUrl:"",// 当前歌曲封面图
        hotComments:[],// 热门评论列表
    },
    methods:{
    // 1、搜索功能   绑定键盘事件，按下enter键触发  同时用v-modle绑定keywords值
        handleSearch:function(){
            console.log("搜索开始：keywords:",this.keywords);
            // axios get请求接口数据  传入剩下的URL信息和keywords
            axios.get("/search",{
                params:{
                    keywords:this.keywords,
                }
            })
            .then((res)=>{
                console.log(res);// 我们只要result下的data里的songs里的数据，所以要用axios的返回的拦截器
                this.songs=res.result.songs;
                console.log("搜索到的所有音乐：",this.songs);
            })
            // 异常处理
            .catch((err)=>{
                console.log(err);
            })
        },
    // 2、playerSongs播放音频,传入歌曲的id
        playSongs:function(songId){
            // 当点击音频按钮时，播放音频isAudioPlaying为true
            this.isAudioPlaying=true;
            // 发送一个GET请求
            axios.get("song/url",{
                params:{
                    id:songId,// 传一个ID
                },
            })
            .then((res)=>{
                console.log(res);
                this.songUrl=res.data[0].url;// 只用拿到song的音频的URL地址即可
                console.log("音频地址：",this.songUrl);
            })
            // 异常处理
            .catch((err)=>{
                console.log(err);
            })

            // 点击播放时，中间的图片切换成当前歌曲的封面图
            axios.get("/song/detail",{
                params:{
                    ids:songId,
                },
            })
            .then((res)=>{
                console.log(res);
                this.imgUrl=res.songs[0].al.picUrl;
                console.log("封面图地址：",this.imgUrl);
            })
            .catch((err)=>{
                console.log(err);
            })

            // 获取该歌曲的热门评论
            axios.get("/comment/hot?type=0",{
                params:{
                    id:songId,
                }
            })
            .then((res)=>{
                console.log(res);
                this.hotComments=res.hotComments;
                console.log("热门评论列表：",this.hotComments);
            })
            .catch((err)=>{
                console.log(err);   
            })
        },
    // 3、playerMV播放MV，传入MV的mvid
        playMV:function(mvId){
            // 调用原生的ref的音频停止的原生方法，手动将音频停止
            this.$refs.audio.pause();
            /* 当点击了playMV播放MV时，isVideoPlaying为true，显示出来MV界面，
            而此时音频要停止播放。*/
            this.isVideoPlaying=true;
            this.isAudioPlaying=false;
            // 发送一个get请求
            axios.get("/mv/url",{
                params:{
                    id:mvId,// 传一个mvId
                },
            })
            .then((res)=>{
                console.log(res);
                this.mvUrl=res.data.url;
                console.log("MV地址：",this.mvUrl);
            })
            // 异常处理
            .catch((err)=>{
                console.log(err);
            })
        },
    // 4、关闭MV播放窗口
        closeMV:function(){
            this.isVideoPlaying=false;
            // 调用原生的ref的视频停止的原生方法，手动将MV停止
            this.$refs.vedio.pause();
        },
    // 5、关闭音频按钮
        handleAudioPause:function(){
            this.isAudioPlaying=false;   
        }



    }



})